<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="18" :xs="24">
          <div> 当前节点：{{currentTreeNode.name}}</div>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-button style="float:right;" size="mini" type="primary" @click="drawer = true">切换目录</el-button>
        </el-col>
      </el-row>
      
      <el-drawer
            v-model="drawer"
            title="I am the title"
            :direction="direction"
            :before-close="handleClose"
          >
          <el-form-item label="应用" prop="name">
            <el-select 
              v-model="currentAppId" 
              filterable 
              clearable 
              placeholder="Select"
              @change = "selectChange">

              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id" 
              />
            </el-select>
          </el-form-item>
          <el-button type="success" :icon="Plus" @click="addNode('-1')">新增</el-button>
          <el-tree :data="treeNodes" 
                :props="{ children: 'list', label: 'name', disabled: '' }" 
                icon-class="el-icon-share"
                default-expand-all = true
                @node-click="nodeClick" 
        >
            <template #default="{ node, data }">
                <div class="custom-tree-node">
                    <div class='el-button' style="border: 0px">
                        <el-icon color="#409EFC" >
                            <Folder v-if ="data.nodeType == 1" style="width: 20px; height: 20px"  />
                            <Document v-else style="width: 20px; height: 20px" />
                        </el-icon>
                        <span> {{ data.name }}</span>
                    </div>
                    <div>
                        <el-button
                        v-show="data.nodeType == 1"
                        type="success"
                        size="small"
                        :icon="Plus"
                        circle
                        plain
                        @click.stop="addNode(data.id)"
                        />
                        <el-button
                        type="warning"
                        size="small"
                        :icon="Edit"
                        circle
                        plain
                        @click.stop="handleUpdate(scope.data)"
                        />
                        <el-button
                        type="danger"
                        size="small"
                        :icon="Delete"
                        circle
                        plain
                        @click.stop="handleDelete(scope.data)"
                        />
                    </div>
                </div>
            </template>
        </el-tree>
        <addNodeComp :props="addNodeCompProps" @callback="callBackTree" ></addNodeComp>
      </el-drawer>
    </div>
</template>

<script setup lang="ts">
   /***基础组件引入***/
    import { reactive, ref, watch, onMounted, toRefs } from 'vue'
    import { ElTree, ElMessage } from 'element-plus';
    import { Document, Folder, Plus, Edit, Delete } from '@element-plus/icons-vue';

    /****子组件引入****/
    import addNodeComp from './addNode.vue';
    import editNodeComp from './editNode.vue';

    /*****请求组件引入****/
    import { appMenuTree } from '@/api/appMenu';
    import { appSearch } from '@/api/app';
    
    const state = reactive({
      treeNodes: [],
      currentTreeNode:{},
      currentAppId:{},
      addNodeCompProps:{data:{},visible:false},
      options: [],
      drawer:false
    });
    const {
      treeNodes,
      currentAppId,
      currentTreeNode,
      options,
      addNodeCompProps,
      drawer
    } = toRefs(state);

    const emits = defineEmits(['change']);


    function loadTreeNodes() {
      let appId=state.currentAppId;
      appMenuTree(appId).then(response => {
        state.treeNodes = response.data;
      });
    }
    
    function addNode(parentId){
      let appId=state.currentAppId;
      if(!appId){
         ElMessage.error('请选择应用');
         return;
      }
      state.addNodeCompProps.visible = true;
      state.addNodeCompProps.data = {appId: appId,parentId: parentId};
    }

    
    function nodeClick(node){
      if(node.nodeType != 2){
         return;
      }
      state.currentTreeNode = node;
      emits('change',node);
      state.drawer=false;
    }

    function callBackTree(){
      state.addNodeCompProps.visible=false;
      loadTreeNodes();
    }


    function loadSelect(){
      state.loading = true;
      appSearch({pageNum:1,pageSize:500}).then(response =>{
        state.options = response.data.list;
        state.loading=false;
      });
    }
    function selectChange(val){
        emits('change');
        if(!val){
            state.treeNodes=[];
            return;
        }
        loadTreeNodes();
    }

     onMounted(() => {
        loadSelect();
    });

     /**监控父组件传值并赋值***/
    /**监控父组件传值并赋值***/
    const parentData = defineProps({
        props: {
          visible: Boolean,
          data: Object
        }
    });

    watch(() => parentData.props,
       // 回调函数 callback
       (newValue, oldValue) => {
           if(!newValue || !newValue.id){
               state.treeNodes=[];
               return;
           }
           state.currentRow = newValue;
           loadTreeNodes();
       }, {immediate:true, deep: true}
    );

</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  line-height: 40px0;
}

.el-tree-node__label{
  width: 100%
}

.el-tree-node__content {
  height: 40px;
}
</style>